<template>
	<span>{{ countdownText }}</span>
</template>

<script setup lang="ts">
const props = defineProps({
	targetTime: {
		type: Date,
		required: true
	},
	showType: {
		type: String,
		default: 'second' // minute | second
	}
});

const remainingTime = ref(0); // 剩余时间（毫秒）
const intervalId = ref<any>(null); // 定时器ID

const countdownText = computed(() => {
	const totalSeconds = Math.floor(remainingTime.value / 1000);
	const hours = Math.floor(totalSeconds / 3600)
		.toString()
		.padStart(2, '0');
	const minutes = Math.floor((totalSeconds % 3600) / 60)
		.toString()
		.padStart(2, '0');
	const seconds = (totalSeconds % 60).toString().padStart(2, '0');
	return `${hours}:${minutes}:${seconds}`;
});

const updateRemainingTime = () => {
	const now = new Date();
	remainingTime.value = props.targetTime.getTime() - now.getTime();
	if (remainingTime.value <= 0) {
		remainingTime.value = 0;
		clearInterval(intervalId.value);
	}
};

onMounted(() => {
	updateRemainingTime();
	intervalId.value = setInterval(updateRemainingTime, 1000);
});

onUnmounted(() => {
	clearInterval(intervalId.value);
});
</script>

<style scoped></style>
